<template>
    <div id="userDashboard">
        <div class="header">
            <span class="title">应用面板</span>
            <UserDropDown/>
        </div>
        <div class="content">
            <a-tabs v-model:activeKey="activeKey">
                <a-tab-pane key="1" tab="我的应用">
                    <AppList />
                </a-tab-pane>
                <!-- <a-tab-pane key="2" tab="密码修改">
                    <div style="padding-top: 40px">
                        <ChangePassword />
                    </div>
                </a-tab-pane>
                <a-tab-pane key="3" tab="个人信息">
                    <div style="padding-top: 40px">
                        <UserInfo />
                    </div>
                </a-tab-pane>
                <a-tab-pane key="4" tab="安全设置">
                    <div style="padding-top: 40px">
                        <SecuritySetting />
                    </div>
                </a-tab-pane> -->
            </a-tabs>
        </div>
    </div>
</template>
<script setup lang="ts">
  import { ref, } from 'vue'
  import { Tabs as ATabs, TabPane as ATabPane} from 'ant-design-vue'
  import { UserDropDown } from '/@/layouts/default/header/components';
  import AppList from './AppList.vue'
  import ChangePassword from './ChangePassword.vue';
  import UserInfo from './UserInfo.vue';
  import SecuritySetting from './SecuritySetting.vue';

  const activeKey = ref('1');
</script>
<style lang="less" scoped>
@activeColor:  rgb(4, 171, 123);
#userDashboard {
    .header {
        display: flex;
        justify-content: space-between;
        padding: 10px 25px;
        align-items: center;
        .title {
            font-size: 20px;
            font-weight: bold;
        }
    }
    .content {
        width: 100%;
        height: calc(100vh - 68px);
        padding : 25px;
        .ant-carousel {
            box-shadow: 0px 0px 14px #a9a9a9;
            border-radius: 10px;
            margin:40px;
            :deep(.slick-slide) {
                text-align: center;
                height: calc(100vh - 300px);;
                overflow: hidden;
                &>div {
                    height: 100%;
                    width: 100%;
                    &>div {
                        height: 100%;
                    }
                }
                
            }
            :deep(.slick-dots li.slick-active button) {
                width: 24px;
                background: @activeColor;
                opacity: 1;
            }
            :deep(.slick-dots li button) {
                height: 6px;
                width: 24px;
                background: rgb(93, 94, 94);
                opacity: 1;
            }
            :deep(.slick-arrow.custom-slick-arrow) {
                width: 25px;
                height: 25px;
                font-size: 25px;
                color: #424242;
                opacity: 0.3;
            }
            :deep(.custom-slick-arrow:before) {
                display: none;
            }
            :deep(.custom-slick-arrow:hover) {
                opacity: 0.5;
            }
        }
    }
}
</style>